<template>
  <div class="con">
    <textarea id="txt" placeholder="没事就瞎BB" maxlength="120" v-model="msg"></textarea>
    <mt-button type="primary" size="large" @click="postcmts">发表评论</mt-button>
    <ul class="cmt-list">
          <li class="cmt-list-item"  v-for="(item, index) in comments" :key="index">
              <div class="cmts-title">
                  <div class="userface"><img src="../../images/dfboy.png" width="100%"/></div>
                  <div class="cmdata"><p>{{item.username}}  #{{count-index}}楼</p>
                      <p>{{item.dtime | formatDate}}</p>
                  </div>
              </div>
              <p class="msg">{{item.msg}}</p>
          </li>
          <mt-button v-show="flag" type="danger" size="large" plain @click="more" ref='more'>加载更多</mt-button>
          <mt-button v-show="flag1" type="danger" size="large" plain @click="more" ref='more'>没有更多了</mt-button>
			</ul>
  
    
  </div>
</template>

<script>
   

export default {
  data() {
    return {
      comments:[],
      flag:false,
      flag1:false,
      page:1,
      count:'',
      msg:'',
      dtime:'',
      typeid:'',
      ftype:'',
      arctitle:'',
      aid:this.$route.params.id,
    };
  },
  props:['id','arctit'],
  mounted: function(){
            
        },
  methods: { 
     getcomments(page){
       var arcid
       this.aid?arcid=this.aid:arcid=this.id;

      this.$http.get('http://192.168.0.104/linshi/api/get_feedback.php?id='+arcid+'&page='+this.page).then((res) => {
        
       if(res.status ==200){
         this.count=res.body.count;
         if(this.comments.length<1){
           this.comments=res.body.list;
         }else{
           this.comments=this.comments.concat(res.body.list)
         }
         if(this.comments.length==parseInt(this.count)){ 
           this.flag=false;
           this.flag1=true;
           }else{
            this.flag=true
           }
           if(this.comments.length>0){
              this.typeid = this.comments[0].typeid
           }
      
      
       }else{
         console.log('数据加载')
       }
          
        
      });
     },
     more(){
       if(this.comments.length==parseInt(this.count)){
         return false;
         
       }
        this.page +=1
        this.getcomments(this.page)
     },
     postcmts(){
       if(this.msg==''){
         return
       }else{
             var arcid
       this.aid?arcid=this.aid:arcid=this.id;
        var postDate={
         'id':arcid,
         'typeid':this.typeid?this.typeid:0,
         'msg':this.msg,
         'username':'匿名用户',
         'dtime':parseInt((new Date())/1000),
         'arctitle':this.arctitle.replace(/'/g,"&quot;")
       }
       this.$http.post('http://192.168.0.104/linshi/api/post_feedback.php',postDate).then((res) => {  
       if(res.status ==200){ 
         this.count ++;
         this.msg='';
         this.comments.unshift(postDate)
         console.log(res)}
          });
       }
      }
            
        },

  components: {
        
    },
  created() {
   this.getcomments(this.page);
   console.log(this.arctit,this.id)
  },
  watch: {
    'arctit':function(val,oleval){
      this.arctitle=val
    }
  },
};
</script>

<style lang="scss">
#txt{
  margin-bottom: 10px;
};
.cmt-list{
  margin-top: 15px;border: none;list-style: none;padding:0;
  p{margin-bottom: 0;font-size:12px;}
}
.cmt-list-item{
 border-bottom: 1px solid #eee;margin:6px 0;
};
.cmts-title{display: flex;justify-content:space-between;
  .userface{flex: 1;img{line-height: 0;}}
  .cmdata{flex: 5;padding: 10px 10px 0;}

}


</style>
